To build a basic progress bar, apply the .progress class to a container and the .progress-bar class to a child element. Set the bar’s width using the CSS width property

Example

Output :

Output :

Progress Bar Labels

Add text inside the progress bar to show the visible percentage:

Output :

Colored Progress Bars

The progress bar is blue by default (using the primary style) You can change its color with other contextual background classes.

Output :

Striped Progress Bars

Use the .progress-bar-striped class to add stripes to the progress bars:

Output :

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Output :

Multiple Progress Bars

Progress bars can also be stacked:

Output :